<template>
  <tn-popup
    v-model="showPopup"
    mode="bottom"
    background-color="#121212"
    safe-area-inset-bottom
    :z-index="10001"
    :margin="0"
    :padding="0"
    class="fullwidth-popup"
    radius="32rpx 32rpx 0 0"
  >
    <view class="report-popup-wrapper">
      <view class="report-popup-header">
        <text class="report-popup-title">举报</text>
        <text class="report-popup-close tn-icon-close" @tap="cancelReport"></text>
      </view>
      <view class="report-popup-body">
        <view class="report-section">
          <view class="report-section-title">举报原因</view>
          <view class="report-options">
            <view 
              v-for="(item, index) in reportReasons" 
              :key="index" 
              class="report-option" 
              :class="{'selected': selectedReportReason === item.value}"
              @tap="selectReportReason(item.value)"
            >
              <text>{{ item.label }}</text>
            </view>
          </view>
        </view>
        <view class="report-section">
          <view class="report-section-title">详细说明</view>
          <textarea 
            class="report-content" 
            v-model="reportContent" 
            placeholder="请描述更多详情，有助于我们更好地处理（选填）"
            placeholder-class="placeholder"
            maxlength="200"
          ></textarea>
          <view class="report-content-limit">{{ reportContent.length }}/200</view>
        </view>
      </view>
      <view class="report-popup-footer">
        <view class="report-btn cancel" @tap="cancelReport">取消</view>
        <view class="report-btn submit" @tap="submitReport">提交</view>
      </view>
    </view>
  </tn-popup>
</template>

<script>
export default {
  name: 'ReportPopup',
  
  props: {
    // 是否显示弹窗
    value: {
      type: Boolean,
      default: false
    },
    // 要举报的内容数据
    reportData: {
      type: Object,
      default: () => ({})
    }
  },
  
  data() {
    return {
      selectedReportReason: '',
      reportContent: '',
      reportReasons: [
        { value: 'porn', label: '色情低俗' },
        { value: 'ad', label: '广告骚扰' },
        { value: 'fraud', label: '诈骗信息' },
        { value: 'illegal', label: '违法违规' },
        { value: 'harassment', label: '人身攻击' },
        { value: 'rumor', label: '造谣传谣' },
        { value: 'other', label: '其他' }
      ]
    }
  },
  
  computed: {
    showPopup: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit('input', value);
      }
    }
  },
  
  methods: {
    // 选择举报原因
    selectReportReason(reason) {
      this.selectedReportReason = reason;
    },
    
    // 取消举报
    cancelReport() {
      this.reset();
      this.$emit('cancel');
      this.showPopup = false;
    },
    
    // 提交举报
    submitReport() {
      if (!this.selectedReportReason) {
        uni.showToast({
          title: '请选择举报原因',
          icon: 'none',
          duration: 1500
        });
        return;
      }
      
      // 构建举报数据 - 适配后端接口
      // 获取所选举报原因对应的中文标签
      const selectedReason = this.reportReasons.find(item => item.value === this.selectedReportReason);
      const reasonLabel = selectedReason ? selectedReason.label : this.selectedReportReason;
      
      const reportData = {
        reportType: this.getReportType(this.reportData.type),
        businessId: String(this.reportData.id), // 业务ID（转为字符串）
        reason: reasonLabel, // 使用中文举报原因
        detail: this.reportContent, // 详细说明
        reportedUserId: this.reportData.userId || null // 被举报用户ID（如果有）
      };
      
      // 触发提交事件
      this.$emit('submit', reportData);
      
      // 重置数据并关闭弹窗
      this.reset();
      this.showPopup = false;
    },
    
    // 重置数据
    reset() {
      this.selectedReportReason = '';
      this.reportContent = '';
    },
    
    // 获取举报类型对应的后端枚举值
    getReportType(frontendType) {
      // 举报类型映射: 1-用户, 2-动态, 3-评论, 4-私信
      const typeMap = {
        'user': 1,
        'post': 2,
        'comment': 3,
        'message': 4
      };
      
      return typeMap[frontendType] || 2; // 默认为动态类型
    }
  }
}
</script>

<style lang="scss" scoped>
/* 举报弹窗内容样式 */
.report-popup-wrapper {
  /* 弹窗内容样式 */
  .report-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx;
    border-bottom: 1px solid #222;
    
    .report-popup-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #fff;
    }
    
    .report-popup-close {
      font-size: 36rpx;
      color: #888;
      padding: 10rpx;
    }
  }
  
  .report-popup-body {
    padding: 32rpx;
    max-height: 60vh;
    overflow-y: auto;
    
    .report-section {
      margin-bottom: 40rpx;
      
      .report-section-title {
        font-size: 28rpx;
        color: #aaa;
        margin-bottom: 24rpx;
      }
      
      .report-options {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
        
        .report-option {
          padding: 16rpx 30rpx;
          background-color: #222;
          border-radius: 40rpx;
          font-size: 28rpx;
          color: #e0e0e0;
          transition: all 0.2s;
          
          &.selected {
            background-color: #8eac21;
            color: #fff;
          }
        }
      }
      
      .report-content {
        width: 100%;
        height: 200rpx;
        background-color: #222;
        border-radius: 20rpx;
        padding: 20rpx;
        color: #e0e0e0;
        font-size: 28rpx;
      }
      
      .placeholder {
        color: #666;
      }
      
      .report-content-limit {
        text-align: right;
        color: #666;
        font-size: 24rpx;
        margin-top: 10rpx;
      }
    }
  }
  
  .report-popup-footer {
    display: flex;
    padding: 20rpx 32rpx 40rpx;
    border-top: 1px solid #222;
    
    .report-btn {
      flex: 1;
      height: 88rpx;
      border-radius: 44rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      transition: all 0.2s;
      
      &.cancel {
        background-color: #222;
        color: #e0e0e0;
        margin-right: 20rpx;
      }
      
      &.submit {
        background: linear-gradient(135deg, #8eac21, #B3F73C);
        color: #050505;
        font-weight: 600;
      }
      
      &:active {
        transform: scale(0.98);
      }
    }
  }
}
</style>

<style lang="scss">
/* 图鸟UI弹窗全局样式覆盖 */
.fullwidth-popup {
  .tn-popup__content {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    border-radius: 32rpx 32rpx 0 0 !important;
  }
}
</style> 